<script lang="ts">
export default {
	name: 'TabBar',
}
</script>
<script setup lang="ts">
import { ref } from 'vue'

const tabBar = [
	{
		title: '首页',
		to: {
			name: 'home',
		},
		icon: 'home-o',
	},
	// {
	// 	title: '版本介绍',
	// 	to: {
	// 		name: 'category',
	// 	},
	// 	icon: 'apps-o',
	// },
	{
		title: '购物车',
		to: {
			name: 'shopcart',
		},
		icon: 'shopping-cart-o',
		badge: 0,
	},
	{
		title: '我的',
		to: {
			name: 'mycenter',
		},
		icon: 'contact-o',
	},
]

const active = ref(0)
</script>

<template>
	<van-tabbar v-model="active" fixed route safe-area-inset-bottom>
		<van-tabbar-item v-for="(item, index) in tabBar" :key="index" :to="item.to" :name="item.to.name" :icon="item.icon" :badge="item.badge">{{ item.title }}</van-tabbar-item>
	</van-tabbar>
</template>

<style lang="scss" scoped>
.van-tabbar.van-tabbar--fixed {
  bottom: 0px !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

:deep(.van-tabbar-item) {
  .van-tabbar-item__icon {
    font-size: 1ch !important;
    margin-bottom: 2px !important;
  }
  
  .van-tabbar-item__text {
    font-size: 20px !important;
  }
}
</style>
